<template>
  <div style="width: 100%;height: 100%;">
    <div id="main4" style="width: 100%;height: 100%;"></div>
  </div>
</template>
<script>
const echarts = require('echarts')
export default {
  name: '',
  components: {
  },
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main4'))
      // const innerFontColor = '#FFFFFF'
      // const outerFontColor = '#666666'
      // const scale = 1
      const echartData = {
        inner: [
          {
            value: 700,
            unit: '个',
            name: '行业大类1'
          },
          {
            value: 679,
            unit: '个',
            name: '行业大类2'
          },
          {
            value: 1548,
            unit: '个',
            name: '行业大类3'
          }
        ],
        outer: [
          {
            value: 310,
            unit: '个',
            name: '邮件营销'
          },
          {
            value: 234,
            unit: '个',
            name: '联盟广告'
          },
          {
            value: 335,
            unit: '个',
            name: '视频广告'
          },
          {
            value: 548,
            unit: '个',
            name: '百度'
          },
          {
            value: 351,
            unit: '个',
            name: '谷歌'
          },
          {
            value: 247,
            unit: '个',
            name: '必应'
          }
        ]
      }
      // const legend1 = echartData.inner.map(v => v.name)
      // const legend2 = echartData.outer.map(v => v.name)
      // const legendData = [...legend1, ...legend2]
      const option = {
        backgroundColor: '#fff',
        color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
          '#8d98b3', '#FFEA01', '#B8D07C', '#fca4bb', '#dc69aa',
          '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
          '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
        ],
        title: {
          text: '档案分类统计',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: [0, '35%'],
            itemStyle: {
              normal: {
                borderColor: '#fff',
                borderWidth: 2
              }
            },
            label: {
              normal: {
                position: 'inner'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: echartData.inner
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['45%', '55%'],
            data: echartData.outer,
            labelLine: {
              normal: {
                length: 20,
                length2: 140,
                lineStyle: {
                  color: '#e6e6e6'
                }
              }
            },
            label: {
              normal: {
                formatter: params => {
                  return (
                    '{icon|●}{name|' + params.name + '}{percent|' + params.percent.toFixed(1) + '%}{value|' +
                    (params.value) + '}'
                  )
                },
                padding: [0, -130, 25, -130],
                rich: {
                  color: '#333',
                  icon: {
                    fontSize: 16
                  },
                  name: {
                    fontSize: 14,
                    padding: [0, 5, 0, 5],
                    color: '#666666'
                  },
                  percent: {
                    color: '#333',
                    padding: [0, 5, 0, 0]
                  },
                  value: {
                    fontSize: 16,
                    fontWeight: 'bold',
                    color: '#333333'
                  }
                }
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      // 根据窗口的大小变动图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
